<template>
  <div class="sec-dialog">
    <open-modal :openModal="isShow">
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-pr24 c-pb30 c-pl24 c-maxh760">
        <template v-if="currAddress.addrId">
          <div class="c-flex-row c-aligni-center c-justify-center c-p c-bd-b1 c-hh64">
            <span class="c-fs24 c-fc-xblack">收货地址</span>
            <span class="c-fs24 iconfont c-pa c-p-r24 c-fc-gray" @click="closeModalIndependent">&#xe8fd;</span>
          </div>
          <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
            <span class="c-ww150 c-fs24 c-fc-gray">收件人</span>
            <input type="text" :value="currAddress.name" disabled class="input-right c-fs28 c-flex-grow1 c-w0 c-fc-xblack" placeholder="收件人">
          </div>
          <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
            <span class="c-ww150 c-fs24 c-fc-gray">联系电话</span>
            <input type="tel" :value="currAddress.mobile" disabled class="input-right c-fs28 c-flex-grow1 c-w0  c-fc-xblack" placeholder="联系电话">
          </div>
          <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
            <span class="c-ww150 c-fs24 c-fc-gray">所在地区</span>
            <div class="c-flex-row c-flex-grow1 c-w0 c-fs28  c-fc-xblack picker-address">
              <!-- <x-address :themeColor="$getThemeColor()" value-text-align='left' disabled title="" :list="addressData" v-model="currAddressVal" raw-value placeholder="请选择地址" :show.sync="showAddress"
                class="c-flex-grow1"></x-address> -->
              <input type="text" :value="currAddress.province+currAddress.city+ currAddress.area" disabled class="input-right c-fs28 c-flex-grow1 c-w0  c-fc-xblack" placeholder="所在区域">
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
            <span class="c-ww150 c-fs24 c-fc-gray">详细地址</span>
            <input type="text" disabled :value="currAddress.address" class="input-right c-fs28 c-flex-grow1 c-w0  c-fc-xblack" placeholder="街道、楼牌号等">
          </div>
          <div class="c-hh72 c-fs24 c-fc-white c-br36 c-lh72 c-textAlign-c c-mt48 havePriz-comit" @click="addressSubmit">提交</div>
          <!-- 选择切换收货地址：只有商城商品才有 -->
          <div @click="changeAddress" class="c-fs24 c-fc-gray c-flex-row c-justify-center c-aligni-center c-mt48">更换收货地址</div>
        </template>
        <template v-else>
          <div class="c-flex-row c-aligni-center c-justify-center c-p c-bd-b1 c-hh64">
            <span class="c-fs24 c-fc-xblack">收货地址</span>
            <span class="c-fs24 iconfont c-pa c-p-r24 c-fc-gray" @click="isShow=false">&#xe8fd;</span>
          </div>
          <div class="c-hh320 c-pt120 c-flex-row c-justify-center c-fs24 c-fc-gray">暂无收货地址，请点击新建收货地址</div>
          <div @click="goAddAddress" class="c-hh72 c-fs28 c-br36 c-lh72 c-textAlign-c c-mt48 c-fc-reword">新建收货地址</div>
        </template>
      </div>
    </open-modal>

  </div>
</template>
<script>
import openModal from "@/components/templates/common/openModal.vue";
import {utilJs} from "@/utils/common.js";
import {mapState} from "vuex";
export default {
  name: "liveDeliveryAddress",
  components: {
    openModal,
  },
  props: {
    zIndex: {
      type: [String, Number],
      default: 501
    },
    liveId: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      isShow: false,
      currAddress: {}, //弹框显示地址
      addressList: null, //收货地址
      showAddress: false,
    }
  },
  computed: {
    ...mapState({
      prizeInfo: state => state.live.prizeInfo
    })
  },
  mounted() {
    if (this.prizeInfo) {
      //通过切换收货地址跳回
      this._activityType = this.prizeInfo.activityType;
      this._prizeId = this.prizeInfo.prizeId;
      let addressInfo = localStorage.getItem("AddressInfo");
      if (addressInfo) {
        //有选中的本地收货地址
          this.currAddress = JSON.parse(addressInfo);
          this.currAddress.area = this.currAddress.area || ''
          this.open({prizeId: this._prizeId, activityType:this._activityType})
      }
    }
  },
  activated() {
    if (this.prizeInfo) {
      //通过切换收货地址跳回
      this._activityType = this.prizeInfo.activityType;
      this._prizeId = this.prizeInfo.prizeId;
      let addressInfo = localStorage.getItem("AddressInfo");
      if (addressInfo) {
        //有选中的本地收货地址
          this.currAddress = JSON.parse(addressInfo);
          this.currAddress.area = this.currAddress.area || ''
          this.open({prizeId: this._prizeId, activityType:this._activityType})
      }
    }
  },
  methods: {
    getAddressList() {
      return new Promise((resolve) => {
        utilJs.getMethod(`${global.apiurl}address?page=1`, res => {
          this.addressList = res.address.data;
          resolve();
        })
      })
    },
   //领取奖品提交
    addressSubmit() {
      //1抽奖  2福利  3大转盘  4邀请达人活动
      let url = '';
      console.log(this.prizeInfo);
      if (this.prizeInfo.activityType == 1) {
        url = `${global.apiurl}live/lottery/submitWxMallOrder`;
      } else if (this.prizeInfo.activityType == 2) {
        url = `${global.apiurl}live/liveWeal/submitWxMallOrder`;
      } else if (this.prizeInfo.activityType == 3) {
          //大转盘的领奖还分了两个接口
          if (this.prizeInfo.prodId) {
            url = `${global.apiurl}activity/turntable/submitWxMallOrder`;
          } else {
            //没有开通商城的时候提交收货地址
            url = `${global.apiurl}activity/turntable/setTurntableLogInfo`;
          }
      } else if (this.prizeInfo.activityType == 4) {
        if (this.prizeInfo.prizeType == 4) {
          //其他类型奖品
          url = `${global.apiurl}live/invite/submitOtherPrize`;
        } else {
          url = `${global.apiurl}live/invite/submitWxMallOrder`;
        }
      }
      let submitData = {
        talId: this.prizeInfo.prizeId,
        userAddressId: this.currAddress.addrId
      };
      if (this.prizeInfo.activityType == 1) {
        //抽奖活动需要额外传递rId
        submitData.rId = this.prizeInfo.rId;
      }
      utilJs.postMethod(
        url,
        submitData,
        () => {
          this.isShow = false;
          this.$emit('getAwardByAddrSuccess', { activityType: this.prizeInfo.activityType });
          this.$store.commit('live/setPrizeInfo', null); //清空prizeInfo的信息
          this.$showCjToast({
            text: '提交成功',
            type: 'success',
            time: 1500
          });
        },
        () => {
          this.closeModalIndependent();
          this.$emit('getAwardByAddrFail');
        }
      );
    },
    //打开收货地址
    open() {
      console.log('openAddress', this.prizeInfo);
      this.isShow = true;
      if (!this.currAddress.addrId || !this.addressList) {
        //没有本地存储的选中的收货地址
        this.getAddressList().then(() => {
          if (!this.currAddress.addrId) {
            this.currAddress = this.addressList.filter(item => item.status == 1)[0] || {};
            this.currAddress.area = this.currAddress.area || '';
          }
          console.log("this.currAddress", this.currAddress)
        });
      }
    },
    closeModalIndependent() {
      this.isShow = false;
      this.$store.commit("live/setPrizeInfo", null); //清空prizeInfo的信息
    },
    changeAddress() {
      // this.$store.commit("live/setPrizeInfo", {prizeId: this._prizeId, activityType:this._activityType, rId: this._rId})
      this.$routerGo(this, "push", {
        path: "/mall/shippingAddress/addressList"
      })
    },
    goAddAddress() {
      // this.$store.commit("live/setPrizeInfo", {prizeId: this._prizeId, activityType:this._activityType, rId: this._rId});
      this.$routerGo(this, "push", {
        path: "/mall/shippingAddress/addressList"
      })
    }
  }
}
</script>
<style scoped lang="scss">
.input-right {
  height: 100%;
  border: 0;
  background: none;
  outline: none;
}
.sec-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 502;
}

.havePriz-comit {
  background: #fd5709;
}
</style>
